<template>
  <div>
    <div class="my-cell" @click="showTree">
      <div class="my-cell-title">
        <span class="weui-label">{{title}}</span>
      </div>
      <div class="my-cell-content" v-show="showValue">
        {{value}}
      </div>
    </div>
    <div v-transfer-dom
         class="self-tree">
      <popup v-model="show"
             height="100%"
             id="test"
             :hide-on-blur="false"
             @on-hide="closeMask"
             :popup-style="{'z-index':9998,'overflow': 'auto','background':'#fff'}">
             <project-root
             :formType="formType"
             :module="module"
             :status="status"
             @selectedAllPro="selectedAllPro"
             @selectPro="selectPro"
             @hidePop="hidePop">

             </project-root>
      </popup>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        title:{
            type:String,
            default:""
        },
        //表单类型(检查单or整改单和巡检单一样)
        formType : {
            type : String,
            default : ""
        },
        //模块(质量or安全or日常巡检)
        module : {
            type : String,
            default : ""
        },
        //状态（选项目时是在表单发起状态or列表状态）
        status : {
            type : String,
            default : ""
        },
        showValue : {
            type:Boolean,
            default(){
                return false
            }
        },
        value:{
            type : String,
            default : ""
        },
    },
    data(){
        return{
            show:false,
            ispm:"",
        }
    },
    methods:{
        hidePop(val){
            this.show = val
        },
        showTree(){
            this.show = true
        },
        selectedAllPro(val){
            this.show = false
           this.$emit("selectAllPro",val);
        },
        selectPro(val){
            console.log("123",val)
            this.show = false
            
            this.ispm = val.isPm
           this.$emit("selectPro",val);
        }
    },
    watch:{
        
    }
}
</script>

<style scoped>
.my-cell {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  color: #9f9f9f;
  font-size: 13px;
  left: -15px;
  padding-top: 7px;
  line-height:40px !important;
  padding: 20px 0;
}
.my-cell::after{
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: relative;
  top: -2px;
  left: -2px;
}

.my-cell-title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  color: #000000;
  padding-left: 30px;
}
.my-cell-content {
  position: relative;
  color: #888888;
  right: 4px;
  bottom: 2px;
}
.weui-label{
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(25,25,25,1);
    line-height: 20px;
}
</style>